﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="MealPlanDetails.aspx.cs" Inherits="MealPlansDetail" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <link href="js/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.validationEngine.js" type="text/javascript"></script>
    <script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
    <link rel="stylesheet" href="jquery/jRating.jquery.css" type="text/css" />
    <script type="text/javascript" src="jquery/jRating.jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            jQuery(".form").validationEngine({ scroll: false, focusFirstField: false });
            loadRecipes();
        });
        function loadRecipes() {
            var MealPlanId = getUrlVars()["MealPlanId"];
            if (MealPlanId != null) {
                $.ajax({
                    type: "POST",
                    url: "PIMService.asmx/GetRecipeUserByMealPlan",
                    data: "{'MealPlanId':'" + MealPlanId + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        if (response.d.length > 0) {
                            BindRecipe(response);
                        }
                        else {
                            $('#leftpanel').append('<h1>Add recipe here</h1>');
                            $('#leftpanel').height('200px');
                        }
                    },
                    error: function (msg) {
                    }
                });
            }
        }
        function getUrlVars() {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for (var i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

        function RemoveIngredient(recipeId) {
            if (confirm('Do you want to remove this Recipe?')) {
                $("#RC" + recipeId + "").remove();
                document.getElementById("<% =hdRecipeId.ClientID %>").value = document.getElementById("<% =hdRecipeId.ClientID %>").value.replace(recipeId + ',', '');
            }
        }

        function BindRecipe(response) {
            var recipe = response.d;
            var html = "";
            var userid = '<%=Session["Userid"]%>';

            $('#leftpanel').html(html);
            html = "<ul class='ul02'>";

            for (var i = 0; i < recipe.length; i++) {
                var varObjectID = recipe[i].RecipeID;

                var varObjectName;
                var varObjectNameFull;
                if (recipe[i].RecipeName != null) {

                    varObjectName = recipe[i].RecipeName.substring(0, 10);
                    if (varObjectName.length > 10) varObjectName = varObjectName + ' ..';
                    varObjectNameFull = recipe[i].RecipeName;
                }
                else {
                    varObjectName = 'No Name..';
                    varObjectNameFull = 'No Name';
                }
                var varObjectImage = recipe[i].RecipeImage;
                var varUserName = recipe[i].UserName;
                var rating = recipe[i].RecipeRating;
                var description = recipe[i].Description;
                if (varObjectImage == '') varObjectImage = "images/PlanItMeal_NoImage.png";

                if (varObjectImage != null) {
                    var recipeID = varObjectID + ',';
                    document.getElementById("<% =hdRecipeId.ClientID %>").value = document.getElementById("<% =hdRecipeId.ClientID %>").value + recipeID;
                    html += '<li id="RC' + varObjectID + '">';
                    html += '<p title="' + varObjectNameFull + '" onclick="javascript:CallRecipeDetail(' + varObjectID + ')" class="text">' + varObjectName + '</p>';
                    html += '<p class="mar_b04"><a href="#"><img class="tooltip" ondblclick="javascript:CallRecipeDetail(' + varObjectID + ')" src="' + varObjectImage + '" OnError="this.src=\'images/PlanItMeal_NoImage.png\';" alt="" width="220" height="220" title="<b>Name: </b>' + varObjectNameFull + '</br><b>Description: </b>' + description + '</br><b>Author: </b>' + varUserName + '</br><div class=basic data-average=' + rating + ' data-id=1></div>"/></a></p>';
                    html += '<div class="clearfix">';
                    if (userid != '0')
                        html += '<p class="img_r"><img title="Remove this recipe" id="minusicon" src="images/iconminus.jpg" alt="" width="13" height="12" onclick="javascript:RemoveIngredient(' + varObjectID + ');" /></p>';
                    html += '</div>';
                    html += '</li>';

                }
            }

            html += '</ul>';
            $('#leftpanel').append(html);
            init_tooltip();
        }

        function CallRecipeDetail(recipeid) {
            self.location = "NewRecipe.aspx?RecipeId=" + recipeid;
        }
    </script>
    <script type="text/javascript">
        function getFile() {
            document.getElementById("<%=fImageUpload.ClientID%>").click();
            return false;
        }
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById("<%=Image2.ClientID%>").src = e.target.result;
                    var object = e.target.result;
                    object = object.replace('data:image/png;base64,', '');
                    object = object.replace('data:image/png;base64,', '');
                    object = object.replace('data:image/jpg;base64,', '');
                    object = object.replace('data:image/gif;base64,', '');
                    object = object.replace('data:image/jpeg;base64,', '');
                    object = object.replace('data:image/bmp;base64,', '');
                    object = object.replace('data:image/Icon;base64,', '');
                    document.getElementById("<%=hdImage.ClientID%>").value = object;
                    //alert(object);
                };
                reader.readAsDataURL(input.files[0]);
                return false;
            }
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div style="width: 100%; text-align: center; margin-bottom: 10px;">
        <asp:Button ID="btnSave" Text="Save" runat="server" Visible="false" CssClass="save_button"
            OnClick="btnSave_Click" />
        <asp:Button ID="btnEdit" Text="Edit" runat="server" Visible="false" CssClass="save_button"
            OnClick="btn_Click"></asp:Button>
        <asp:Button ID="btnDelete" Visible="false" OnClientClick="if (!confirm('Are you sure you want delete?')) return false;"
            Text="Delete" runat="server" CssClass="save_button" OnClick="btnDelete_Click1">
        </asp:Button>
    </div>
    <div class="box02 clearfix">
        <div class="alpha01 clearfix">
            <p class="mar_b15">
                <img src="images/img04.jpg" id="Image2" runat="server" alt="" width="225" height="225" class="profile-pic" /></p>
            <div class="basic" style="margin: 0 auto;" data-average="0" data-id="1">
            </div>
            <p class="img03">
                <asp:Button ID="btnUpload" runat="server" Text="Add Photo" Width="155" Height="27"
                    Visible="false" OnClientClick="return getFile()" />
            </p>
            <div class="share">
               <%-- <a id="lnkFacebook" runat="server" target="_blank" class="icon-fb-mp" title="Share facebook">
                    <img id="imgFB" width="30" height="30" src="images/icon-fb.png">
                </a>--%>
                <ul style="float:left; width:100%">
        <li style="float:left; margin-right:5px ">
         <a id="lnkFacebook" runat="server" target="_blank" >
            <img ID="img1"  width="30" height="30" 
        src="images/icon-fb.png" 
              />
        </a>
        </li>
        <li style="float:left; margin-right:5px ">
            <a id="lnkGoogle" runat="server" target="_blank" ><img
          src="https://www.gstatic.com/images/icons/gplus-32.png" width="30" height="30"  alt="Share on Google+"/></a>
        </li>
        <li style="float:left;margin-right:5px ">
            <a id="lnkTwitter" runat="server"  target="_blank"><img src="images/twitter.png" width="30" height="30" /></a>
        </li>
        <li  style="float:left;">
            <a id="lnkEmail" runat="server"  target="_blank"><img src="images/mail.png" width="30" height="30" /></a>
        </li>
    </ul>
            </div>
        </div>
        <div class="beta01 clearfix">
            <asp:Panel ID="panel1" Visible="false" runat="server">
                <div style="margin-bottom: 15px">
                <p>
                    <asp:TextBox runat="server" ID="txtMealPlanName" MaxLength="50" placeholder="MealPlan Name"
                        CssClass="validate[required] field-textbox"></asp:TextBox>
                        </p>
                </div>
                <div style="margin-bottom: 15px">
                <p>
                    <asp:TextBox runat="server" ID="txtBasic" TextMode="MultiLine" placeholder="Basic Info"
                        CssClass="field-textbox"></asp:TextBox>
                        </p>
                </div>
                <div style="margin-bottom: 15px">
                    <p>
                    <asp:TextBox runat="server" ID="txtDescription" TextMode="MultiLine" placeholder="Description"
                        CssClass="field-areatbox"></asp:TextBox>
                        </p>
                </div>
                <div style="padding: 10px; font-size: 16px">
                    <input type="checkbox" id="Checkbox1" checked="true" runat="server" name="vehicle"
                        value="1" />Share with others
                </div>
            </asp:Panel>
            <asp:Panel ID="panel2" Visible="true" runat="server">
                <p class="title04">
                    <asp:Label runat="server" ID="lblMealPlanName"></asp:Label>
                </p>
                <div class="border01 clearfix clear">
                    <asp:Label ID="lblBasic" runat="server"></asp:Label>
                </div>
                <div class="border01 clearfix clear">
                    <asp:Label ID="lblDescription" runat="server"></asp:Label>
                </div>
                <div style="margin-bottom:20px;">
                    <input type="checkbox" id="chIsPublish" disabled="true" checked="true" runat="server"
                        name="vehicle" value="1" /><label style="margin-left:10px;">Share with others</label>
                </div>
            </asp:Panel>
            
            <div class="clearfix">
                <div id="leftpanel" class="clearfix " style="width:100%; height:auto;">
                </div>
            </div>
            <div id="fb-root">
            </div>
            <script>                (function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) return;
                    js = d.createElement(s); js.id = id;
                    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=208238106017076";
                    fjs.parentNode.insertBefore(js, fjs);
                } (document, 'script', 'facebook-jssdk'));

            </script>
            <div id="mycomment" style="width: 100%">
                <%--<div class="fb-comments" data-href="" data-width="400" data-numposts="10" data-colorscheme="light"></div>--%>
            </div>
            <script>
        //alert(getUrlVars()["RecipeId"]);
        if (getUrlVars()["MealPlanId"] != null) {
            var elemDiv = document.getElementById("mycomment");
            var markup = '';
            var widthWin = ($(window).width() - 200) *70/100;
            markup += '<div class="fb-comments" data-href="' + location.href + '" data-num-posts="10" data-width="' + widthWin + '" style="margin-top:2em;"></div>';
            elemDiv.innerHTML = markup;
            FB.XFBML.parse(elemDiv);
        }
            </script>
            <div style="overflow: hidden; height: 0px; width: 0px;">
                <asp:FileUpload type="file" ID="fImageUpload" runat="server" onchange="readURL(this);" />
            </div>
            <script>
                function Rating() {
                    var userid = '<%=Session["Userid"]%>';
                    if (document.getElementById("<%=ratingStar.ClientID%>").value != "") {
                        $(".basic").attr('data-average', document.getElementById("<%=ratingStar.ClientID%>").value);
                    } else {
                        $(".basic").attr('data-average', '0');
                    }
                    if (userid != "") {
                        var recipeID = getUrlVars()["MealPlanId"];
                        $(".basic").jRating({
                            step: true,
                            length: 5,
                            decimalLength: 1,
                            smallStarsPath: 'jquery/icons/small.png',
                            onSuccess: function (element, rate) {
                                document.getElementById("<%=ratingStar.ClientID%>").value = rate;
                                if (recipeID != null)
                                    submitRating(rate);
                            },
                            onError: function () {
                                alert('Error : please retry');
                            }
                        });

                    } else {
                        $(".basic").jRating({
                            isDisabled: true
                        });
                    }
                    //return false;
                }
                function submitRating(rate) {
                    var mealPlanID = getUrlVars()["MealPlanId"];
                    $.ajax({
                        type: "POST",
                        url: "PIMService.asmx/Rating",
                        data: "{'objectTypeID':'0','objectID':'" + parseInt(mealPlanID, 10) + "','rating':'" + parseInt(rate, 10) + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                        },
                        error: function (msg) { alert(msg.d); }
                    });
                }

                function getUrlVars() {
                    var vars = [], hash;
                    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                    for (var i = 0; i < hashes.length; i++) {
                        hash = hashes[i].split('=');
                        vars.push(hash[0]);
                        vars[hash[0]] = hash[1];
                    }
                    return vars;
                }
            </script>
            <asp:HiddenField ID="ratingStar" runat="server" />
            <asp:HiddenField ID="hdRecipeId" runat="server"></asp:HiddenField>
            <asp:HiddenField ID="hdImage" runat="server" />
            <asp:HiddenField ID="checkUser" runat="server" />
            <asp:HiddenField ID="hdLinkImage" runat="server" />
        </div>
</asp:Content>
